<template>
  <div>
    <img alt="Vue logo" src="@/assets/logo.svg" width="125" height="125" />
    <h1>我来自APP组件</h1>
    <h3>姓名：{{ name }}</h3>
    <h3>全名：{{ fullName }}</h3>
    <button @click="changename">改名</button>
    <Hello_2 ref="hello" />
    <Hello_1 />
  </div>
</template>

<script lang="ts">
//vue2的一套用法，发现可以写但是没必要，你都用vue3的版本了，为何还要如此？？？？
import Hello_1 from './components/HelloWorld.vue'
import Hello_2 from './components/Hello.vue'
export default {
  name: 'App',
  components: {
    Hello_1,
    Hello_2
  },
  data() {
    return {
      name: '张三',
      hello: '你好'
    }
  },
  created() {},
  computed: {
    fullName() {
      return this.name + this.hello
    }
  },
  mounted() {
    console.log('App组件挂载成功了')
  },
  watch: {
    name(newvalue, oldvalue) {
      console.log('有人修改了APP组件里面的name属性', newvalue, oldvalue)
    }
  },

  methods: {
    changename() {
      this.name = '李四'
      console.log('app中注册的ref', this.$refs.hello)
    }
  }
}
</script>
